<template>
  <div class="square-list table-theme">
    <head-title title="营销--广场列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <select-view
						:option-list="typeList"
						:value="type_id"
						placeholder="请选择"
						type="type_id"
						@value="setSelectValue"
            label-name="type_name"
            value-name="type_id"
					>
					</select-view>
          <select-view
						:option-list="openList"
						:value="is_open"
						placeholder="排序"
						type="is_open"
						@value="setSelectValue"
					>
					</select-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
          <div class="add">
            <el-button type="primary" @click="onOpenDialog('add')"
              >添加广场</el-button
            >
          </div>
        </div>
      </div>
      <p class="data-number">总用户数：{{ total }}</p>
      <el-table :data="list">
        <el-table-column
          label="序号"
          align="center"
          prop="square_id"
          width="100"
        ></el-table-column>
        <el-table-column
          label="用户ID"
          align="center"
          prop="user_id"
          width="100"
        ></el-table-column>
        <el-table-column
          label="昵称"
          align="center"
          prop="nickname"
          width="100"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="80">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.heard_img"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="封面图" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.cover_img"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="风格"
          align="center"
          prop="title"
        ></el-table-column>
        <el-table-column
          label="说明"
          align="center"
          prop="content"
        ></el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="open_status"
        ></el-table-column>
        <el-table-column
          label="次数"
          align="center"
          prop="click"
        ></el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="onOpenDialog('edit', scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="onOpenDialog('details', scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="onOpenGoods(scope.row.square_id)"
              >关联</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="onDel(scope.row.square_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
          :page-size="limit"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="dialog"
      width="500px"
      center
      :modal-append-to-body="false"
      @close="onClose"
    >
      <el-form :model="form" :rules="formRules" ref="form2" label-width="120px">
        <el-form-item label="风格:" prop="title">
          <el-input
            v-model="form.title"
            :disabled="type === 'details'"
            maxlength="5"
          ></el-input>
        </el-form-item>
        <el-form-item label="说明:" prop="content">
          <el-input
            v-model="form.content"
            :disabled="type === 'details'"
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面:" prop="cover_img">
          <el-image
            fil="cover"
            :src="form.cover_img"
            style="width: 100px; height: 100px"
            v-if="type === 'details'"
          ></el-image>
          <el-upload
            v-else
            class="avatar-uploader"
            ref="upload"
            action="fakeaction"
            :show-file-list="false"
            :http-request="
              function (res) {
                return upload(res);
              }
            "
            multipleaccept="image/*"
          >
            <img v-if="form.cover_img" :src="form.cover_img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态:" prop="is_open">
          <el-select v-model="form.is_open" :disabled="type === 'details'">
            <el-option
              v-for="item in openList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型:" prop="type_id">
          <el-select v-model="form.type_id" :disabled="type === 'details'">
            <el-option
              v-for="item in typeList"
              :key="item.type_id"
              :label="item.type_name"
              :value="item.type_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="次数:" v-if="type === 'details'">
          <el-input
            v-model="form.click"
            :disabled="type === 'details'"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSubimt('form2')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import SelectView from "@/components/SelectView";
export default {
  components: {
    ImgPopover,
    SelectView
  },
  data() {
    return {
      typeList: [],
      openList: [
        {
          label: "公开",
          value: 1,
        },
        {
          label: "不公开",
          value: 2,
        },
      ],
      searchOption: [
        {
          value: 0,
          label: "序号",
        },
      ],
      classSelect: 0,
      selectContent: "",
      page: 0,
      limit: 20,
      type_id: 0,
      is_open: 1,
      list: [],
      total: 0,
      type: "add",
      form: {},
      dialog: false,
      formRules: {
        title: [{ required: true, message: "请输入风格" }],
        content: [{ required: true, message: "请输入说明" }],
        cover_img: [{ required: true, message: "请上传封面图" }],
        is_open: [{ required: true, message: "请选择状态" }],
        type_id: [{ required: true, message: "请选择类型" }],
      },
      title: "",
    };
  },
  methods: {
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: this.limit,
        square_id: this.selectContent,
        type_id: this.type_id,
        is_open: this.is_open,
      };
      this.$http(this.$ApiList.SquareList, data).then((res) => {
        this.list = res.datas.data;
        this.total = res.datas.count;
      });
    },
    initType() {
      this.$http(this.$ApiList.SquareTypeList).then((res) => {
        this.typeList = res.datas.data;
        this.typeList.unshift({ type_id: 0, type_name: "默认" });
      });
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    refreshPage() {
      this.selectContent = "";
      this.type_id = 0;
      this.is_open = 1;
      this.init();
    },
    onDel(square_id) {
      this.$confirm("此操作将永久删除该广场, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http(this.$ApiList.DelSquare, { square_id }).then((res) => {
          this.$message.success(res.datas);
          this.init(this.page);
        });
      });
    },
    onOpenDialog(type, row) {
      this.type = type;
      this.title =
        type === "details" ? "详情" : type === "add" ? "添加" : "编辑";
      if (type === "add") {
        this.form = {
          cover_img: "",
          title: "",
          content: "",
          is_open: 1,
          type_id: 0,
        };
        this.dialog = true;
        this.$refs.form2.resetFields();
      } else {
        this.$http(this.$ApiList.SquareInfo, { square_id: row.square_id }).then(
          (res) => {
            this.form = res.datas;
            this.dialog = true;
          }
        );
      }
    },
    onClose() {
      this.dialog = false;
    },
    onSubimt(formName) {
      if (this.type === "details") {
        this.dialog = false;
        return false;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          switch (this.type) {
            case "edit":
              let data = JSON.parse(JSON.stringify(this.form));
              delete data.add_time;
              delete data.click;
              delete data.user_id;
              this.$http(this.$ApiList.UpdateSquare, data).then((res) => {
                this.$message.success(res.datas);
                this.dialog = false;
                this.init(this.page);
              });
              break;
            case "add":
              this.$http(this.$ApiList.AddSquare, this.form).then((res) => {
                this.$message.success(res.datas);
                this.dialog = false;
                this.init(this.page);
              });
            default:
              break;
          }
        }
      });
    },
    upload(params) {
      const file = params.file,
        isJPGPNG = file.type === "image/jpeg" || "image/png",
        isLt1MB = file.size / 1024 <= 1024;
      if (!isJPGPNG) {
        this.$message.error("只能上传图片格式png、jpg!");
        return;
      }
      if (!isLt1MB) {
        this.$message.error("图片不能大于1M");
        return;
      }

      let image = new FormData();
      image.append("file[]", file);

      this.$http(this.$ApiList.publicUpload, image).then((res) => {
        this.form.cover_img = res.datas[0];
      });
    },
    onOpenGoods(square_id){
        this.$router.push({path:'/square_goods_list',query:{square_id}})
    },
    setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'type_id':
						this.type_id = value
						break;
          case 'is_open':
            this.is_open = value
            break;
					default:
						break;
				}
				this.init()
			}
  },
  created() {
    this.initType();
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.square-list {
  
}
</style>